<template>
  <div class="tutorial">
    <h2>🌀 旋转过渡动画教程</h2>
    <p>结合旋转与缩放，打造更具动感的入场/退场效果。</p>

    <button class="btn" @click="show = !show">{{ show ? '隐藏' : '显示' }}示例</button>

    <transition name="rotate">
      <div v-if="show" class="demo-box">旋转示例区域</div>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<style scoped>
.tutorial { padding: 20px; }
.btn { padding:8px 12px; background:#ef4444; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.btn:hover { background:#dc2626; }
.demo-box { margin-top:12px; padding:20px; border-radius:12px; background:#fee2e2; border:1px solid #fecaca; }

.rotate-enter-active, .rotate-leave-active { transition: all .32s ease; transform-origin: 50% 50%; }
.rotate-enter-from { transform: rotate(-10deg) scale(0.95); opacity: 0; }
.rotate-enter-to   { transform: rotate(0deg)   scale(1.00); opacity: 1; }
.rotate-leave-from { transform: rotate(0deg)   scale(1.00); opacity: 1; }
.rotate-leave-to   { transform: rotate(10deg)  scale(0.95); opacity: 0; }
</style>